{extend name="../layout/base"}
{block name="title"}{$web_title}{/block}

{block name="body"}
<style>
    .icon-bookshelf{position: absolute;top: 0;width: 26px;right: 4px;}
    .bookshelfListMain{position:relative;}
</style>
<div >
    <table class='head' cellpadding="0" cellspacing="0">
        <tr>
            <td class="head_left"></td>
            <td align="center"><table class='head_but'>
                <tr>
                    <td ><a href="/shujia.html">收藏</a></td>
                    <td  class='head_but_click'>历史</td>
                </tr>
            </table></td>
            <td class="head_right "><img src='__IMG__/bookshelfEdit.png' onclick="edit()"></td>
        </tr>
    </table>
    <style>
         .bookshelfListMaincheck{
            width: 15px;
        }
         .bookshelfListMaincheck div{
             margin-top: -20px;
         }
         .bookshelfListMain .bookshelfListChoiceBut img {
             height: 20px;
         }
         .group .bottomChoiceBut table {
             background-color: white;
             bottom: 56px;
             color: #9b9b9b;
             font-size: 16px;
             position: fixed;
             width: 100%;
         }
         .group .bottomChoiceBut table {
             color: #9b9b9b;
             font-size: 16px;
         }
         .group .bottomChoiceBut td {
             border-top: 1px solid #dedede;
             line-height: 65px;
             text-align: center;
             width: 50%;
         }
         .group .bottomChoiceBut td {
             line-height: 65px;
             text-align: center;
         }

         .group .bottomChoiceBut img {
             height: 20px;
             position: relative;
             top: 3px;
         }
        .lishi_xudu{
            width: 45px;line-height: 25px;margin-right:15px;text-align:center;float: right;background-color: #fee100; border-radius: 20px;color: #763b00;
        }
    </style>
	{empty name="collect"}
		 <div class='noContent'> <img src="__IMG__/noContent.png"> <br>
        亲,你还没有收藏漫画哦 !  ~(*>﹏<*)~ <a href="/">
            <div class='noContentBut'>再去逛逛</div>
        </a>
    </div>
	{else /}

	
    <div class='group'>
    <table cellpadding="0" cellspacing="0" class='bookshelfListMain' >
        {volist name="collect" id="item" key="k"}
        <tr class='bookshelfListMainTr' data-id="{$item.id}" data-model="{$item.model}"onclick='detail(jQuery(this))' >
            <td  class='bookshelfListMaincheck'> <div class='bookshelfListChoiceBut editDiv'  style='height:0px;top:5px;right:2px;z-index:999;display: none'><img src="__IMG__/butOff.png"></div></td>
            <td class='bookshelfListMainImg' ><img src="{if $item.model==2}{$item['articleid']|get_cartoon_img=###,'cartoonspic'}{else/}{$item['articleid']|get_novel_img=###,'cover'}{/if}" data-original="{if $item.model==2}{$item['articleid']|get_cartoon_img=###,'cartoonspic'}{else/}{$item['articleid']|get_novel_img=###,'cover'}{/if}" class='lazyImg' 
			{if $item.model==2}onclick="window.location.href='/books/detail?bookid={$item.articleid}&chapter={$item.order}'"{else/}onclick="window.location.href='/chapter/read/{$item.articleid}/{$item.chapterid}'"{/if}></td>
            <td class='bookshelfListMainText'>
                {if $item.order!=0}	
					<a href="{if $item.model==2}/books/detail?bookid={$item.articleid}&chapter={$item.order}{else/}/chapter/read/{$item.articleid}/{$item.chapterid}{/if}">
                {else}
					<a href="{if $item.model==2}/books/{$item.articleid}{else/}/book/info/id/{$item.articleid}{/if}">
                {/if}
                    <div class='bookshelfListMainTitle' {if $item.model==2}onclick="window.location.href='/books/detail?bookid={$item.articleid}&chapter={$item.order}'"{else/}onclick="window.location.href='/chapter/read/{$item.articleid}/{$item.chapterid}'"{/if}>{$item.name}</div>
                </a>
                <div class="bookshelfListMainImgDiv"> <span>阅读到{$item.order}话</span>  </div>
                <div class='bookshelfListMainDes' {if $item.model==2}onclick="window.location.href='/books/detail?bookid={$item.articleid}&chapter={$item.order}'"{else/}onclick="window.location.href='/chapter/read/{$item.articleid}/{$item.chapterid}'"{/if}>{$item.name}</div>
            </td>
            <td class="head_but_click"><span class="lishi_xudu" {if $item.model==2}onclick="window.location.href='/books/detail?bookid={$item.articleid}&chapter={$item.order}'"{else/}onclick="window.location.href='/chapter/read/{$item.articleid}/{$item.chapterid}'"{/if} >续读</span></td>
        </tr>
        {/volist}
    </table>
    <div style="height:50px;clear:both"> </div>
    {/empty}
    <div class='bottomChoiceBut editDiv' style="display:none">
        <table cellspacing="0" cellpadding="0" style='z-index:1000;'>
            <tr>
                <td class='editAll' onclick='editAll(jQuery(this))'><img src="__IMG__/butOn.png" /> <span>全选</span></td>
                <td  onclick="delres()"><img src="__IMG__/bookshelfDel2.png"  class='delImg' /> 删除</td>
            </tr>
        </table>
    </div>
    {include file="../layout/bootem" /}
     </div>

</div>


{/block}
        {block name="nav"}{/block}
        {block name="bootem_js"}
<script type="text/javascript">

    $(function(){
        lazyImg();
        $('body').addClass('bookshelfBody');

    })

    //右上角编辑按钮
    function edit(){
        if($(".head_right").attr("class").indexOf("head_right_del")<0){
            $(".head_right").addClass("head_right_del");
            $(".editDiv").show();
            todeatilType=false;
            $(".head_right").find("img").attr("src","__IMG__/bookshelfDel.png");
            $("a").attr("disabled","true");
        }else{
            cancelEdit();
        }
        changeDelImg(this);
    }


    function cancelEdit(){
        $(".editDiv").hide();
        todeatilType=true;
        $(".head_right").find("img").attr("src","__IMG__/bookshelfEdit.png");
        $(".head_right").removeClass("head_right_del");
    }

    //全选,取消
    function editAll(obj){
        if(obj.attr("class").indexOf("editAllSelect")<0){
            obj.find("span").html("取消");
            obj.find("img").attr("src","__IMG__/but3.png");
            $(".bookshelfListChoiceBut img").attr("src","__IMG__/butOn.png");
            obj.addClass("editAllSelect");
            $(".bookshelfListChoiceBut").addClass("bookshelfListChoiceButSelect");
        }else{
            obj.removeClass("editAllSelect");
            obj.find("img").attr("src","__IMG__/butOn.png");
            obj.find("span").html("全选");
            $(".bookshelfListChoiceBut img").attr("src","__IMG__/butOff.png");
            $(".bookshelfListChoiceBut").removeClass("bookshelfListChoiceButSelect");
        }
        changeDelImg(obj);
    }

    //根据选择情况改变删除按钮
    function changeDelImg(){
        if($(".bookshelfListMain").html().indexOf("bookshelfListChoiceButSelect")>-1){
            $(".delImg").attr("src","__IMG__/bookshelfDel3.png");
        }else{
            $(".delImg").attr("src","__IMG__/bookshelfDel2.png");
        }
    }

    function detail(obj){
        if(todeatilType){ //进详情
            var id = obj.attr('data-id');
            document.location.href='/books/'+id;
        }else{ //编辑
            if(obj.find(".bookshelfListChoiceBut").attr("class").indexOf("bookshelfListChoiceButSelect")<0){
                obj.find(".bookshelfListChoiceBut img").attr("src","__IMG__/butOn.png");
                obj.find(".bookshelfListChoiceBut").addClass("bookshelfListChoiceButSelect");
            }else{
                obj.find(".bookshelfListChoiceBut img").attr("src","__IMG__/butOff.png");
                obj.find(".bookshelfListChoiceBut").removeClass("bookshelfListChoiceButSelect");
            }
            changeDelImg(obj);
        }
    }

    function delres() {
        var  r =[];
		var  m =[];
        $(".bookshelfListMainTr").each(function () {
            var  res =  $(this).find('.bookshelfListChoiceButSelect').parent().parent().attr('data-id');
			var  model =  $(this).find('.bookshelfListChoiceButSelect').parent().parent().attr('data-model');
            if(typeof(res) !="undefined"){
                r.push(res);
				m.push(model);
            }
        })
       $.post('/history',{ids:r,model:m},function (msg) {
            layer.alert(msg.message);
            setTimeout(function(){
                window.parent.location.reload();
                window.location.reload;
            },1000);
        })
    }


</script>
 {/block}

